                                                                                                                                                                                                                                                                                                                                                    <template>
    <div class="app-container" v-if="canList">
        <div class="filter-container">
                            <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item"
                          placeholder="名字"
                          v-model="listQuery.name">
                </el-input>
                            <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item"
                          placeholder="appId"
                          v-model="listQuery.appId">
                </el-input>
                            <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item"
                          placeholder="秘钥"
                          v-model="listQuery.secret">
                </el-input>
                            <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item"
                          placeholder="商户号"
                          v-model="listQuery.mchId">
                </el-input>
                            <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item"
                          placeholder="支付秘钥"
                          v-model="listQuery.payKey">
                </el-input>
                            <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item"
                          placeholder="微信号ID"
                          v-model="listQuery.wxId">
                </el-input>
                                        <el-select @change='handleFilter'  clearable class="filter-item" style="width: 130px" v-model="listQuery.status"
                           placeholder="状态">
                                        <el-option v-for="(item,index) in  statusOptions" :key="item" :label="item" :value="index">
                    </el-option>
                </el-select>
                        
            <el-button style="margin-left: 10px;" class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">查找
            </el-button>
            <el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary"
                  v-if="canSave"     icon="el-icon-edit">添加
            </el-button>
            <el-button class="filter-item" type="primary" :loading="downloadLoading" v-waves icon="el-icon-download"
                       @click="handleDownload">导出
            </el-button>
        </div>

        <el-table :key='tableKey' :data="list" v-loading="listLoading" border fit highlight-current-row
                  style="width: 100%;min-height:1000px;">
            <el-table-column align="center" label="序号">
                <template slot-scope="scope">
                    <span>{{scope.row.id}}</span>
                </template>
            </el-table-column>
                            <el-table-column align="center" label="名字">
                    <template slot-scope="scope">
                        <span>{{scope.row.name}}</span>
                    </template>
                </el-table-column>
                            <el-table-column align="center" label="appId">
                    <template slot-scope="scope">
                        <span>{{scope.row.appId}}</span>
                    </template>
                </el-table-column>
                            <el-table-column align="center" label="秘钥">
                    <template slot-scope="scope">
                        <span>{{scope.row.secret}}</span>
                    </template>
                </el-table-column>
                            <el-table-column align="center" label="商户号">
                    <template slot-scope="scope">
                        <span>{{scope.row.mchId}}</span>
                    </template>
                </el-table-column>
                            <el-table-column align="center" label="支付秘钥">
                    <template slot-scope="scope">
                        <span>{{scope.row.payKey}}</span>
                    </template>
                </el-table-column>
                            <el-table-column align="center" label="微信号ID">
                    <template slot-scope="scope">
                        <span>{{scope.row.wxId}}</span>
                    </template>
                </el-table-column>
                                        <el-table-column align="center" label="状态">
                    <template slot-scope="scope">
                                                <span>{{statusOptions[scope.row.status]}}</span>
                    </template>
                </el-table-column>
                        
            <el-table-column align="center" label="操作" width="230" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button type="primary"  v-if="canUpdate"  size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
                    <el-button  v-if="canSave"  size="mini" type="danger"
                               @click="handleDelete(scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>

        </el-table>

        <div class="pagination-container">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
                           layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>

        <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
            <el-form :rules="rules" ref="dataForm" :model="temp" label-position="left" label-width="120px"
                     style='width: 450px; margin-left:50px;'>
                                    <el-form-item label="名字" prop="name">
                        <el-input v-model="temp.name"></el-input>
                    </el-form-item>
                                    <el-form-item label="appId" prop="appId">
                        <el-input v-model="temp.appId"></el-input>
                    </el-form-item>
                                    <el-form-item label="秘钥" prop="secret">
                        <el-input v-model="temp.secret"></el-input>
                    </el-form-item>
                                    <el-form-item label="商户号" prop="mchId">
                        <el-input v-model="temp.mchId"></el-input>
                    </el-form-item>
                                    <el-form-item label="支付秘钥" prop="payKey">
                        <el-input v-model="temp.payKey"></el-input>
                    </el-form-item>
                                    <el-form-item label="微信号ID" prop="wxId">
                        <el-input v-model="temp.wxId"></el-input>
                    </el-form-item>
                                                    <el-form-item label="状态" prop="status">
                        <el-select class="filter-item" v-model="temp.status" placeholder="状态">
                            <el-option v-for="(item,index) in  statusOptions" :key="item" :label="item"
                                       :value="index">
                            </el-option>
                        </el-select>
                    </el-form-item>
                                                
                            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeDialogForm">取消</el-button>
                <el-button v-if="dialogStatus=='create'" type="primary" @click="createData">确认</el-button>
                <el-button v-else type="primary" @click="updateData">确认</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<style type="stylus">
    .filter-container {
        padding-bottom: 20px;
    }
</style>

<script>
    import {list, save, update, remove} from '@/api/wxconfig'
    import waves from '@/directive/waves' // 水波纹指令
    
    
    import { mapGetters } from 'vuex'
    import { hasAuth } from '@/utils/auth'
    export default {
        name: 'test',
        directives: {
            waves
        },
        data() {
            return {
                tableKey: 0,
                list: null,
                total: null,
                listLoading: true,
                            listQuery: {
                    page: 1,
                    limit: 20,
                    sidx: 'id',
                    order: 'desc'
                            ,
                name : null
                            ,
                appId : null
                            ,
                secret : null
                            ,
                mchId : null
                            ,
                payKey : null
                            ,
                wxId : null
                                                        ,
                status : null
                    },
                            statusOptions : ['关闭','打开'],
                            temp:
            {
                                    id : null   ,                                    name : null   ,                                    appId : null   ,                                    secret : null   ,                                    mchId : null   ,                                    payKey : null   ,                                    wxId : null   ,                                    status : null                              }
        ,
            dialogFormVisible: false,
                    dialogStatus
        :
            '',
                    textMap
        :
            {
                update: '修改',
                        create
            :
                '新增'
            }
        ,
                                        rules:
            {
                                                                                                                                                name : [
                                                    {
                                required: true, message
                            :
                                '必填字段', trigger
                            :
                                'change'
                            }
                                                ]
                                                ,
                                                                                                                                                        appId : [
                                                    {
                                required: true, message
                            :
                                '必填字段', trigger
                            :
                                'change'
                            }
                                                ]
                                                ,
                                                                                                                                                        secret : [
                                                    {
                                required: true, message
                            :
                                '必填字段', trigger
                            :
                                'change'
                            }
                                                ]
                                                ,
                                                                                                                                                        mchId : [
                                                    {
                                required: false, message
                            :
                                '必填字段', trigger
                            :
                                'change'
                            }
                                                ]
                                                ,
                                                                                                                                                        payKey : [
                                                    {
                                required: false, message
                            :
                                '必填字段', trigger
                            :
                                'change'
                            }
                                                ]
                                                ,
                                                                                                                                                        wxId : [
                                                    {
                                required: false, message
                            :
                                '必填字段', trigger
                            :
                                'change'
                            }
                                                ]
                                                ,
                                                                                                                                                        status : [
                                                    {
                                required: false, message
                            :
                                '必填字段', trigger
                            :
                                'blur'
                            }
                                                ]
                                                                        }
        ,
            downloadLoading: false,
                    qData
        :
            {
                token: '',
                        key
            :
                ''
            }
        }
        },
        created() {
            this.getList()
        },
        computed: {
                ...mapGetters([
                    'perms'
                ]),
        canSave() {
            return hasAuth(this.perms, 'wxconfig:save')
        },
        canDelete() {
            return hasAuth(this.perms, 'wxconfig:delete')
        },
        canUpdate() {
            return hasAuth(this.perms, 'wxconfig:update')
        },
        canList() {
            return hasAuth(this.perms, 'wxconfig:list')
        }
    },
        methods: {
                        getList() {
                this.listLoading = true
                                list(this.listQuery).then(response => {
                    this.list = response.data.list
                this.total = response.data.total
                this.listLoading = false
            })
            },
            handleFilter() {
                this.listQuery.page = 1
                this.getList()
            },
            handleSizeChange(val) {
                this.listQuery.limit = val
                this.getList()
            },
            handleCurrentChange(val) {
                this.listQuery.page = val
                this.getList()
            },
            handleModifyStatus(row, status) {
                this.$message({
                    message: '操作成功',
                    type: 'success'
                })
                row.status = status
            },
            beforeFormShow(row){
                this.resetTemp(row) // 更新数据
                // 存在图片
                
                        },
            afterFormShow(row){

            },
            beforeFormCommit(){
                        },
            resetTemp(row) {

                    this.temp = {}
                    if (row) {
                        this.temp = Object.assign({}, row) // copy obj
                    }

            },
            handleCreate() {
                this.beforeFormShow()
                this.resetTemp()
                this.dialogStatus = 'create'
                this.dialogFormVisible = true
                this.$nextTick(() => {
                    this.afterFormShow()
                    this.$refs['dataForm'].clearValidate()
            })
            },
            handleDelete(row) {
                this.beforeFormShow(row)
                this.temp = Object.assign({}, row) // copy obj
                this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // this.$message({
                    //   type: 'success',
                    //   message: '删除成功!'
                    // })
                    this.deleteData()
            }).
                catch(() => {
                    this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
            },
                        createData() {
                this.$refs['dataForm'].validate((valid) => {
                    if(valid) {
                        this.beforeFormCommit()
                        save(this.temp).then(res => {
                            this.temp = res.data
                        this.list.unshift(this.temp)
                        this.closeDialogForm()
                        this.$notify({
                            title: '成功',
                            message: '创建成功',
                            type: 'success',
                            duration: 2000
                        })
                    })
                    }
                }
            )
            },
            deleteData() {
                const ids = [this.temp.id]
                remove({ids:ids}).then(res => {
                    // 从当前队列中移除
                    for(const v of this.list
            )
                {
                    if (v.id === this.temp.id) {
                        const index = this.list.indexOf(v)
                        this.list.splice(index, 1)
                        break
                    }
                }
                this.$notify({
                    title: '成功',
                    message: '删除成功',
                    type: 'success',
                    duration: 2000
                })
            })
            },
            handleUpdate(row) {
                    this.beforeFormShow(row)
                this.dialogStatus = 'update'
                this.dialogFormVisible = true
                this.$nextTick(() => {
                    this.$refs['dataForm'].clearValidate()
            })
            },
            updateData() {
                this.$refs['dataForm'].validate((valid) => {
                    if(valid) {
                        this.beforeFormCommit()
                        update(this.temp).then(() => {
                            for(const v of this.list
                    )
                        {
                            if (v.id === this.temp.id) {
                                const index = this.list.indexOf(v)
                                this.list.splice(index, 1, this.temp)
                                break
                            }
                        }
                        this.closeDialogForm()
                        this.$notify({
                            title: '成功',
                            message: '更新成功',
                            type: 'success',
                            duration: 2000
                        })
                    })
                    }
                }
            )
            },
            closeDialogForm() {
                                this.dialogFormVisible = false
            },
            handleDownload() {
                this.downloadLoading = true
                import('@/vendor/Export2Excel').then(excel => {
                    const tHeader = [
                        '序号'
                                            ,
                        '名字'
                                            ,
                        'appId'
                                            ,
                        '秘钥'
                                            ,
                        '商户号'
                                            ,
                        '支付秘钥'
                                            ,
                        '微信号ID'
                                                                ,
                                                '状态'
                                                            ]
                    const filterVal = ['id'
                                                    ,'name'
                                                    ,'appId'
                                                    ,'secret'
                                                    ,'mchId'
                                                    ,'payKey'
                                                    ,'wxId'
                                                                            ,
                            'status'
                                                                    ]
                    const data = this.formatJson(filterVal, this.list)
                    excel.export_json_to_excel({
                    header: tHeader,
                    data,
                    filename: 'table-list'
                })
                this.downloadLoading = false
            })
            },
            formatJson(filterVal, jsonData) {
                return jsonData.map(v => filterVal.map(j => {
                    return v[j]
                }
            ))
            },
                    }
    }
</script>
